<form class="layui-form" action="" style="padding:20px" id="userLoginForm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label layui-icon layui-icon-username">用户:</label>
            <div class="layui-input-inline">
                <input type="text" name="username" id="username" placeholder="请输入用户名" class="layui-input" required lay-verify="required"
               />
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label layui-icon layui-icon-username">密码:</label>
            <div class="layui-input-inline">
                <input type="password" name="userpwd" id="userpwd" placeholder="请输入密码" class="layui-input" required lay-verify="required"/>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label layui-icon layui-icon-username">角色:</label>
            <div class="layui-input-inline">
                <select name="role" lay-verify="required" id="role">
                    <option value="">请选择角色类型</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item" style="padding-top:70px;padding-left: 10px">
        <div class="layui-input-block">
            <!-- lay-submit -->
            <button class="layui-btn" lay-submit lay-filter="formDemo" id="formDemoBtn">登录</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>

    //初始化用户角色下拉框
    function initUserLoginFormSelect() {
        var url = "/queryDictionByDpid";
        $.getJSON(url, function (data) {
            var str = "";
            for (var i = 0; i < data.roleList.length; i++) {
                str += "<option value='" + data.roleList[i].dId + "'>" + data.roleList[i].dName + "</option>";
            }
            $('#role').append(str);
            //渲染下拉框
            form.render('select');
        });
    }

    //提交表单
    form.on('submit(formDemo)', function (data) {
        var roleValue = $('#role').val();
        var url = '/userLogin';
        var url = url + '?userName=' + data.field.username + "&userPwd=" + data.field.userpwd + "&uRole="+ roleValue;
        $.getJSON(url, function (data) {
            if (data.user == null) {
                layer.msg('用户登录失败');
            } else {
                sessionStorage.setItem("loginUser", JSON.stringify(data.user));
                sessionStorage.setItem("isLogin", "OK");
                //保存操作人员的ID
                iuserid = data.user.uId;
                initIndexPage(data.user.uRealName, data.user.uRoleStr);
                //将登陆窗口关闭
                layer.close(panelIndex);
            }
        });
        return false;
    });

    //初始化页面
    $(function () {
        initUserLoginFormSelect();
    })
</script>
